<template>
  <div class="app-container">
    <div class="app-container-inner" style="height: 88vh;" v-loading="loading" element-loading-text="加载中...">
      <div class="header flex-justify-end">
        <div class="search flex-align-center">
          <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始日期"
            end-placeholder="退回结束时间" @change="dateChange" value-format="YYYY-MM-DD HH:mm:ss" />
          <el-select class="mr10" v-model="data.status" placeholder="退回状态" filterable clearable>
            <el-option v-for="item in option" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
          <el-input clearable v-model="data.workSpareNo" @keyup.enter.native="getList" placeholder="配件单号"
            class="input-with-select" />
          <el-input clearable v-model="data.workNo" @keyup.enter.native="getList" placeholder="工单单号"
            class="input-with-select" />
          <el-input clearable v-model="data.oldSpareNo" @keyup.enter.native="getList" placeholder="旧件单号"
            class="input-with-select" />
          <el-select v-model="data.networkId" class="mr10" placeholder="服务商" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <el-button class="btn btn-bg1 mr5" @click="getList()">
            <el-icon class="mr5">
              <Search />
            </el-icon>搜索
          </el-button>
        </div>
      </div>
      <div class="table-list">
        <el-table :border="true" stripe resizable :data="tableData" height="72vh" style="width: 100%">
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
            <template v-slot="i">
              {{ i.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="oldSpareNo" label="退回编号" width="190" />
          <el-table-column show-overflow-tooltip prop="date" label="工单编号" width="200" />
          <el-table-column show-overflow-tooltip label="状态" width="120">
            <template #default="scope">
              <el-tag class="ml-2" type="warning" v-if="scope.row.status == 1">待退回</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 2">待确认并填写物流</el-tag>
              <el-tag v-if="scope.row.status == 3">已退回</el-tag>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="store" label="退回仓库" width="140" />
          <el-table-column show-overflow-tooltip prop="network" label="服务商" width="140" />
          <el-table-column show-overflow-tooltip prop="receiptName" label="客户名称" width="100" />
          <el-table-column show-overflow-tooltip prop="receiptPhone" label="电话" width="110" />
          <el-table-column show-overflow-tooltip label="地址" width="150">
            <template v-slot="i">
              <span>{{ i.row.receiptProvince + ' ' + i.row.receiptCity + ' ' + i.row.receiptArea + ' ' + i.row.receiptTown
                + ' ' + i.row.receiptAddress
              }}</span>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="updateTime" label="最后更新时间" width="150"></el-table-column>
          <!-- <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
            <template #default="scope">
              <div class="btns">
                <button class="btn-table bgColor1" @click="goOrder(scope.$index)">工单</button>
                <button class="btn-table bgColor2" @click="viewDetail(scope.$index)">详细</button>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="footer">
        <div class="pagina">
          <Pagination ref="pagination" :list_total="totalList" @size-change="getList" @current-change="getList" />
        </div>
      </div>

      <!-- 查看详细弹出框 -->
      <el-dialog :draggable="true" :destroy-on-close="true" v-model="detailDialog" title="旧件退回信息" width="900px" top="3vh"
        class="detail-dialog">
        <div class="tables">
          <table class="table-j">
            <colgroup>
              <col width="90" />
              <col />
              <col width="90" />
              <col />
              <col width="90" />
              <col />
            </colgroup>
            <tbody>
              <tr>
                <td class="bg-gray"><b>退回编号</b></td>
                <td>123123123123</td>
                <td class="bg-gray"><b>申请网点</b></td>
                <td>日日顺</td>
                <td class="bg-gray"><b>申请时间</b></td>
                <td>2015-15-15 15:15:15</td>
              </tr>
              <tr>
                <td class="bg-gray"><b>工单编号</b></td>
                <td><a class="text-blue">123123123123</a></td>
                <td class="bg-gray"><b>审批人员</b></td>
                <td>客服：张三</td>
                <td class="bg-gray"><b>审批时间</b></td>
                <td>2015-15-15 15:15:15</td>
              </tr>
              <tr>
                <td class="bg-gray"><b>当前状态</b></td>
                <td>已完成</td>
                <td class="bg-gray"><b>申请类型</b></td>
                <td>厂家配件</td>
                <td class="bg-gray"><b>旧件处理</b></td>
                <td>寄回</td>
              </tr>
            </tbody>
          </table>
          <div class="table-detail">
            <el-table border stripe resizable size="default" :data="tableData2" style="width: 100%">
              <el-table-column show-overflow-tooltip prop="date" label="退回仓库" width="150" />
              <el-table-column show-overflow-tooltip prop="name" label="退回配件" />
              <el-table-column show-overflow-tooltip prop="state" label="配件费用" width="150" />
              <el-table-column show-overflow-tooltip prop="city" label="附件" width="120" />
              <el-table-column show-overflow-tooltip prop="city" label="审核" width="120" />
            </el-table>
          </div>
          <div class="table-detail">
            <el-table border stripe resizable size="default" :data="tableData2" style="width: 100%">
              <el-table-column show-overflow-tooltip prop="name" label="入库单号" width="140">
                <template #default="scope">
                  <span class="number">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip prop="date" label="退回仓库" width="120" />
              <el-table-column show-overflow-tooltip prop="date" label="物流名称" width="120" />
              <el-table-column show-overflow-tooltip prop="state" label="物流单号" width="120" />
              <el-table-column show-overflow-tooltip prop="date" label="物流备注" width="120" />
              <el-table-column show-overflow-tooltip prop="date" label="入库时间" width="120" />
              <el-table-column show-overflow-tooltip prop="state" label="入库状态" width="120">
                <template #default="scope">
                  <span class="state">{{ scope.row.state }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <table class="table-j">
            <colgroup>
              <col width="120" />
            </colgroup>
            <tbody>
              <tr>
                <td class="bg-gray"><b>退回收货信息</b></td>
                <td>客户地址 张三 18823235555 广东省佛山市顺德区容桂镇科技创新中心2座2104</td>
              </tr>
            </tbody>
          </table>
          <div class="table-detail">
            <el-table :border="true" stripe resizable size="default" :data="tableData2" style="width: 100%">
              <el-table-column show-overflow-tooltip prop="name" label="收付款单据编号" />
              <el-table-column show-overflow-tooltip prop="date" label="收付类型" width="120" />
              <el-table-column show-overflow-tooltip prop="date" label="金额" width="80" />
              <el-table-column show-overflow-tooltip prop="state" label="账户" width="120" />
              <el-table-column show-overflow-tooltip prop="city" label="结算方" width="120" />
              <el-table-column show-overflow-tooltip prop="city" label="结算时间" width="170" />
            </el-table>
          </div>
          <div class="table-detail">
            <el-table :border="true" stripe resizable size="default" :data="tableData2" style="width: 100%">
              <el-table-column show-overflow-tooltip prop="name" label="时间" width="170" />
              <el-table-column show-overflow-tooltip prop="date" label="操作人" width="200" />
              <el-table-column show-overflow-tooltip prop="date" label="操作事件" width="200" />
              <el-table-column show-overflow-tooltip prop="state" label="备注" width="120" />
            </el-table>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import Pagination from '../../../../components/Pagination/index.vue'
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getBackList } from '../../../../api/parts'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const value = ref('')
const input = ref('')
const detailDialog = ref(false)
const loading = ref(false)
const pagination = ref()
const totalList = ref(0)
const time = ref('')
const data = reactive({
  "callbackEndTime": "",//旧件退回结束时间
  "callbackStartTime": "",//旧件退回开始时间
  "limit": 0,
  "networkId": null,//服务商ID
  "oldSpareNo": "",//旧件单号
  "page": 0,
  "status": null,//	旧件退回状态：1-待退回，2-待确认并填写物流，3-已退回
  "workNo": "",//工单单号
  "workSpareNo": ""//	工单配件单号
})
// 查看工单
const goOrder = (n: number) => {
  router.push('/order/odetail')
}
const option = [{ name: '待退回', value: 1 }, { name: '待确认并填写物流', value: 2 }, { name: '已退回', value: 3 }]
// 查看配件详细
const viewDetail = (n: number) => {
  detailDialog.value = true
}

const options = [
  {
    value: '全部类型',
  },
  {
    value: '全部品牌',
  },
  {
    value: '全部分类',
  },
]

const tableData = ref(null)
// 时间变化
const dateChange = (val) => {
  if (val === null) {
    data.callbackStartTime = ''
    data.callbackEndTime = ''
  } else {
    data.callbackStartTime = val[0]
    data.callbackEndTime = val[1]
  }
  getList()
}

const tableData2 = [
  {
    date: '厂家配件',
    name: 'CK2306289143',
    state: '待审核',
    city: '深圳市南山区维修店',
    address: '2023-04-26 11:31:01',
    zip: 'CA 90036',
    tag: 'Home',
  },
  {
    date: '20230602590500824',
    name: '2016-05-02',
    state: 'California',
    city: '自动派单测试',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home',
  },
]
async function getList() {
  loading.value = true
  data.page = pagination.value.current
  data.limit = pagination.value.size
  await getBackList(data).then(res => {
    if (res.data.success) {
      tableData.value = res.data.data.rows
      totalList.value = Number(res.data.data.total)
    } else {
      ElMessage({
        showClose: true,
        message: res.data.message,
        type: 'error',
        duration: 4000,
        offset: 200
      })
    }
    loading.value = false
  })
}
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
